<template>
<view class="order-box">
  <!-- 订单导航 -->
  <view class="order-nav">
    <scroll-view scroll-x class="bg-white nav text-black" scroll-with-animation :scroll-left="scrollLeft" :show-scrollbar="false">
      <view class="cu-item" :class=" index == orderStatus ? 'text-orange cur' : '' " v-for="(item, index) in navList" :key="index" @tap="navSelect" :data-status="item.status">
        {{item.label}}
      </view>
    </scroll-view>
  </view>

  <!-- 订单列表 -->
  <view class="order-list-box margin-tb-sm" v-if="hasData">
    <view class="order-card padding-lr padding-tb-sm margin-top-sm bg-white text-black" v-for="(item, index) in orderList" :key="index" @tap="gotoOrderDetails(item)">
      <view class="header flex">
        <view class="cu-tag radius margin-right text-df" :class="item.type === 1 ? 'bg-blue' : 'bg-orange'">{{ORDER_TAG_TYPE_LIST[item.type]}}</view>
        <view class="text-lg text-cut">{{item.title}}</view>
      </view>

      <view class="content margin-top-sm">
        <view class="infos flex">
          <view class="product-img bg-gray basis-xs margin-right-sm">
            <lazy-img v-if="item.image_logo" :src="BASE_URL + item.image_logo" mode="widthFix"></lazy-img>
          </view>
          <view class="details basis-xl flex justify-between">
            <view class="price flex justify-between text-lg">
              <view class="text-orange text-price text-xl">{{item.type === 1 ? item.price : item.price + '/天'}}</view>
              <!-- <view class="text-orange text-price text-xl" v-if="item.type === 2">{{item.pricePerDay}}/天</view> -->
              <view class="status" :class="item.status === 6 ? 'text-orange' : item.status === 7 || item.status === 8? 'text-red' : ''">{{ORDER_STATUS_LIST[item.status]}}</view>
            </view>

            <view class="desc flex justify-between text-gray text-sm">
              <!-- <view v-if="item.type === 1">{{item.color}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.ram}}</view> -->
              <view v-if="item.type === 2">{{item.stages_value}}&nbsp;&nbsp;|&nbsp;&nbsp;{{item.day_value}}</view>
              <view class="repay-date">{{item.next_pay_time}}</view>
            </view>
          </view>
        </view>
        <view class="time flex justify-between margin-top text-gray">
          <text v-if="item.type === 1">购买时间</text>
          <text v-if="item.type === 1">{{item.buy_time}}</text>
          <text v-if="item.type === 2">起租时间</text>
          <text v-if="item.type === 2">{{item.lease_time}}</text>
        </view>
      </view>

      <view class="actions margin-top-sm padding-top-sm border-top cf" v-if="item.status === 1 || item.status === 4 || item.status === 7">
        <text class="text-orange text-price fl" v-if="item.overdue">{{item.overdue}}</text>
        <view class="actions-btns fr">
          <button class="cu-btn round margin-lr-xs line-gray" v-if="item.status === 1">取消</button>
          <!-- <button class="cu-btn round margin-lr-xs line-orange" v-if="item.status === 7">归还</button> -->
          <!-- <button class="cu-btn round margin-lr-xs bg-blue" v-if="item.status === 7">续租</button> -->
          <!-- <button class="cu-btn round margin-lr-xs bg-red" v-if="item.status === 7">买断</button> -->
          <button class="cu-btn round margin-lr-xs bg-orange" v-if="item.status === 4">还款</button>
        </view>
      </view>
    </view>
  </view>

  <view class="no-data h100 bg-white text-xl flex align-center justify-center flex-direction" v-if="!hasData">
    <image src="/static/no_data.png" mode="aspectFit"></image>
    暂无数据
  </view>
</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'order', // 订单显示列表
  data () {
    return {
      orderStatus: 0,
      scrollLeft: 0,
      navList: [
        {
          status: 0,
          label: '全部订单'
        },
        {
          status: 1,
          label: '待付款'
        },
        {
          status: 2,
          label: '待发货'
        },
        {
          status: 3,
          label: '待收货'
        },
        {
          status: 4,
          label: '租用中'
        },
        {
          status: 5,
          label: '待结算'
        },
        {
          status: 6,
          label: '已完成'
        },
        {
          status: 7,
          label: '已逾期'
        }
      ],
      orderList: [],
      page: 1,
      pageSize: 10
    }
  },
  computed: {
    ...mapState([
      'BASE_URL',
      'ORDER_STATUS_LIST',
      'ORDER_TAG_TYPE_LIST'
    ]),
    hasData() {
      return this.orderList.length !== 0
    }
  },
  watch: {
    orderStatus(newVal) {
      this.getOrderList(newVal)
    }
  },
  created() {
    if (this.$Route.query.status) {
      this.orderStatus = this.$Route.query.status
    }
    this.getOrderList(this.orderStatus)
  },
  methods: {
    getOrderList(status = 0) {
      const params = {
        status,
        page: this.page,
        pageSize: this.pageSize
      }
      this.$api.getOrderList(params).then(res => {
        console.log('订单列表', res)
        if (!res) return
        const resData = res.data
        this.orderList = resData
      })
    },
    navSelect(e) {
      this.orderStatus = e.currentTarget.dataset.status
      this.scrollLeft = (e.currentTarget.dataset.status - 1) * 60
    },
    gotoOrderDetails(item) {
      const { order_id } = item
      this.$Router.push({
        name: 'order-details',
        params: { id: order_id }
      })
    }
  }
}
</script>

<style lang="less">
.order-box {
  position: relative;

  .order-list-box {
    padding-top: 70rpx;
  }
}
.order-nav {
  position: fixed;
  top: 0;
  // top: var(--status-bar-height);
  left: 0;
  width: 100%;
  height: 90rpx;
  z-index: 3;
}

</style>
